<template>
	<view class="container">
		<!-- 标题 -->
		<view class="title">
			智引未来-基于AI的就业成长平台
		</view>
		<!-- 平台图标容器 -->
		<view class="logo-container">
			<image :src="imgsrc" class="platform-logo" mode="aspectFit" />

		</view>
		<!-- 表单区域 -->
		<u--form class="form-container" :model="model1" :rules="rules" ref="uForm" errorType="toast">


			<!-- 学号输入 -->
			<u-form-item class="input-wrapper" prop="user.studentId">
				<u-input v-model="model1.user.studentId" placeholder="请输入学号" class="rounded-input"
					shape="circle">
					<!-- 小图标 -->
					<template #prefix>
						<u-icon name="account" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>



			<!-- 密码输入 -->
			<u-form-item class="input-wrapper" prop="user.newPassword">
				<u-input v-model="model1.user.newPassword" placeholder="请输入密码" password class="rounded-input"
					shape="circle">
					<template #prefix><!-- 图标 -->
						<u-icon name="lock" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>


			<!-- 确认密码输入 -->
			<u-form-item class="input-wrapper" prop="user.confirmPassword">
				<u-input v-model="model1.user.confirmPassword" shape="circle" placeholder="请输入确认密码" password
					class="rounded-input">
					<!-- 小图标 -->
					<template #prefix>
						<u-icon name="lock" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>



			<!-- 手机号输入 -->
			<u-form-item class="input-wrapper" prop="user.phone">
				<u-input v-model="model1.user.phone" placeholder="请输入手机号" class="rounded-input"
					shape="circle">
					<template #prefix>
						<u-icon name="phone" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>


			<!-- 验证码输入 -->
			<u-form-item class="input-wrapper code-input" prop="user.verificationCode">
				<u-input v-model="model1.user.verificationCode" placeholder="请输入验证码" class="rounded-input"
					shape="circle">
					<template #prefix>
						<u-icon name="email" size="30" color="#7f8388" margin-right="10"></u-icon>
					</template>
				</u-input>
			</u-form-item>
			<u-button @click="getVerificationCode" type="primary" size="mini" plain :disabled="codeDisabled"
				class="custom-style" shape="circle">
				{{ model1.user.codeButtonText }}
			</u-button>
			<!-- 注册按钮 -->
			<u-button @click="handleBind" type="primary" shape="circle" class="bind-btn">
				注册
			</u-button>

			<view class="login-link">
				已经有账号 <span @click="goToLogin">去登陆</span>
			</view>
		</u--form>
	</view>
</template>

<script>
	import {
		register
	} from '../../../api/loginModel/loginModel';
	export default {
		data() {
			return {
				imgsrc:this.$baseURL+"/profile/upload/2025/05/10/logo_20250507082032A011_20250510150253A033.jpg",
				model1: {
					user: {
						studentId: '', // 学号
						newPassword: '', // 密码
						confirmPassword: '', // 确认密码
						phone: '', // 手机号
						verificationCode: '', // 验证码
						codeDisabled: false, // 验证码按钮禁用状态
						codeButtonText: '获取验证码', // 验证码按钮文字
						countdown: 60, // 倒计时秒数
					}
				},

				//  注册所需要的对象
				registerData: {
					studentID: "",
					telephone: "",
					password: ""
				},

				rules: {
					'user.studentId': {
						type: 'string',
						required: true,
						message: '请填写学号',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},
					'user.newPassword': {
						type: 'string',
						required: true,
						message: '请填写密码',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},
					'user.confirmPassword': {
						required: true,
						message: '请确认新密码',
						trigger: ['change', 'blur'],
					},
					'user.phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						//change：字段值发生变化时校验   blur：输入框失去焦点时触发
						trigger: ['blur', 'change']
					},

					'user.verificationCode': {
						type: 'string',
						required: true,
						len: 4,
						message: '请填写4位验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		options: {
			styleIsolation: 'shared'
		},
		methods: {
			// 获取验证码
			getVerificationCode() {
				if (!this.model1.user.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				if (!/^1[3-9]\d{9}$/.test(this.model1.user.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					});
					return;
				}

				// 这里调用获取验证码的API
				// 示例：this.$api.sendSmsCode({ phone: this.phone })

				// 模拟发送成功
				uni.showToast({
					title: '验证码已发送'
				});
				this.startCountdown();
			},

			// 开始倒计时
			startCountdown() {
				this.codeDisabled = true;
				let timer = setInterval(() => {
					this.model1.user.countdown--;
					this.model1.user.codeButtonText = `${this.model1.user.countdown}s`;

					if (this.model1.user.countdown <= 0) {
						clearInterval(timer);
						this.model1.user.codeDisabled = false;
						this.model1.user.codeButtonText = '获取验证码';
						this.model1.user.countdown = 60;
					}
				}, 1000);
			},

			// 处理注册
			handleBind() {

				this.$refs.uForm.validate().then(res => {

					if (this.model1.user.newPassword !== this.model1.user.confirmPassword) {
						uni.$u.toast("两次输入的密码不一致");
					} else {
						// 根据表单检验数据后
						this.registerData.password = this.model1.user.newPassword
						this.registerData.studentID = this.model1.user.studentId
						this.registerData.telephone = this.model1.user.phone

						// console.log(this.registerData)
						// 发送注册请求
						register(this.registerData).then((res) => {
							console.log(res)
							if (res.code == "200") {
								console.log(res.msg)
								// 实现注册成功后的逻辑
								// 模拟注册成功
								uni.showToast({
									title: '注册成功',
									icon: 'none', // 使用 'none' 避免默认的对勾图标
									duration: 2000 // 显示时间 2 秒
								});

								setTimeout(() => {
									this.goToLogin();
								}, 1500);
							} else {
								// uni.showToast({
								// 	title: '注册失败',
								// 	icon: 'none', // 使用 'none' 避免默认的对勾图标
								// 	duration: 2000 // 显示时间 2 秒
								// });
								// console.log(res.msg)
								// 注册失败，用弹框提示用户注册失败。
							}
						})
					}

				}).catch(errors => {
					if (this.model1.user.newPassword !== this.model1.user.confirmPassword) {
						uni.$u.toast("两次输入的密码不一致");
					} else {
						uni.$u.toast(errors[0].message);
					}
				});
			},

			// 跳转到登录页
			goToLogin() {
				uni.redirectTo({
					url: '/pages/loginModel/login/login'
				});
			},



		},

		//生命周期 进行表单校验
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},

	}
</script>

<style lang="scss" scoped>
	//验证码按钮
	/deep/ .u-button--plain.data-v-3bf2dba7 {
		position: absolute;
		width: 70px;
		left: 225px;
		bottom: 227px;
		z-index: 9;
	}


	.container {
		padding: 40rpx;
		min-height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 标题 */
	.title {
		font-size: 40rpx;
		font-weight: bold;
		text-align: center;
		margin: 40rpx 0;
		color: #333;
	}

	/* 平台图标 */
	.logo-container {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx 0 60rpx;

		.platform-logo {
			width: 200rpx;
			height: 200rpx;
			border-radius: 24rpx;
		}
	}

	/* 表单区域 */
	.form-container {
		width: 100%;
		padding: 0 50rpx;
	}

	/* 输入框样式 */
	.input-wrapper {
		position: relative;

		/* 输入框 */
		.rounded-input {
			background-color: #fff;
			padding: 0 20rpx;
			height: 90rpx;
		}
	}

	/* 验证码 */
	.code-input {
		position: relative;
		display: flex;
		align-items: center;

		.rounded-input {
			flex: 1;
			margin-right: 15rpx;
			align-items: right;
		}

		.code-btn {
			position: absolute;
			display: flex;
			margin-left: 100px;
			left: 100px;
			width: 200rpx;
			height: 90rpx;
			line-height: 100rpx;
			border-radius: 50rpx;
			font-size: 40rpx !important;
			white-space: nowrap;
			border: 1px solid #dcdfe6;
			background-color: #fff;
			color: #2979ff;


			&[disabled] {

				opacity: 0.6;
			}
		}
	}

	.login-link {
		text-align: center;
		color: #999;
		font-size: 14px;
	}

	.login-link span {
		color: #2979ff;
		margin-left: 5px;
		cursor: pointer;
	}

	.login-link span:hover {
		text-decoration: underline;
	}
</style>